<template>
	<view>
		<view style="background-image: linear-gradient(to right bottom, #fe511d, #fe511d);padding: 30rpx 30rpx 100rpx 30rpx;">
			<view class="u-flex user-box" style="">
				<view class="u-m-r-10">
					<u-avatar :src="pic" size="140"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20">林中鸟</view>
					<view class="u-font-14">邀请码：548794</view>
				</view>
				<view class="u-m-l-10 u-p-10">
					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
				</view>
			</view>
			<view class="u-flex11" style="color: #fff;margin-top: 30rpx;font-size: 28rpx;">
				<u-row gutter="16">
					<u-col span="3" text-align="center">
						<view style="font-size: 28rpx;margin-bottom: 10rpx;">18元</view>
						<view class="">今日</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view style="font-size: 28rpx;margin-bottom: 10rpx;">24元</view>
						<view>昨日</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view style="font-size: 28rpx;margin-bottom: 10rpx;">247元</view>
						<view>本月</view>
					</u-col>
					<u-col span="3" text-align="center">
						<view style="font-size: 28rpx;margin-bottom: 10rpx;">1287.5元</view>
						<view>累计</view>
					</u-col>
				</u-row>
			</view>
			<view style="position: absolute;top: 0;width: 100%;"></view>
		</view>
		<view style="margin: 30rpx;position: relative;top: -100rpx;z-index: 111;">
			<view class="box-white">
				<u-grid :col="4" :border="false">
					<u-grid-item bg-color="none">
						<u-icon name="order" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">订单明细</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="man-add" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">我的粉丝</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="calendar" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">新手教程</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="rmb-circle" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">我的收益</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="box-white" style="padding: 30rpx;">
				<view class="title">用户中心</view>
				<u-grid :col="4" :border="false">
					<u-grid-item bg-color="none">
						<u-icon name="fingerprint" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">我的团队</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="star" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">我的收藏</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="gift" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">兑换中心</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="man-add" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">邀请好友</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="file-text" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">推广规则</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="setting" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">设置</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="box-white" style="padding: 30rpx;">
				<view class="title">其他</view>
				<u-grid :col="4" :border="false">
					<u-grid-item bg-color="none">
						<u-icon name="question-circle" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">常见问题</view>
					</u-grid-item>
					<u-grid-item bg-color="none">
						<u-icon name="kefu-ermai" color="#fc6662" :size="55"></u-icon>
						<view class="grid-text">联系我们</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic: 'https://img0.baidu.com/it/u=2171139748,2906953338&fm=26&fmt=auto&gp=0.jpg',
				show: true
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}
	
	.user-box {
		color: #fff;
		font-weight: 600;
		// background-color: #fff;
	}
	.grid-text{
		margin-top: 5px;
		font-size: 28rpx;
	}
	.box-white{
		background-color: #fff;
		border-radius: 10px;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		margin-bottom: 30rpx;
	}
	.box-white .title{
		font-weight: 800;
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}
</style>
